<template>
    <el-button @click="clicked" v-if="this.$slots.default!==undefined" class="label" :class="{'small-font':smallFont}" size="small">
        <i class="dot" :class="activeClass" ></i>
        <slot></slot>
    </el-button>
</template>

<script>/**
 * 此组件封装了三级页面的标签（即是主体页面上方的带一个蓝点的按钮）
 * @props isActive 是否被触发，当此值为true时，蓝点为蓝色，否则为灰色
 */

import {detectZoom} from "~/utils/DpiUtils";

    export default {
        name: "DotLabel",
        props:{
            isActive:{
                type:Boolean,
                default:false,
                deep:true,
            }
        },
        data(){
            return{
                smallFont:false,
            }
        },
        methods:{
            clicked(){
                this.$emit('active');
            }
        },
        computed:{
            activeClass(){
                return this.isActive? 'active' :'';
            }
        },
        mounted() {
            const zoom = detectZoom();
            this.smallFont = zoom>160;
        }
    }
</script>

<style scoped>
    .label{
        width: 150px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
        text-align: center;
    }
    .dot{
        display: inline-flex;
        height: 6px;
        width: 6px;
        border-radius: 50%;
        margin-right: 5px;
        border: #DCDFE6 solid 2px;
    }
    .active{
        background-color: #014FDE;
    }
    .small-font{
        font-size: 0.9em;
        margin-top: 3px;
        margin-bottom: 3px;
    }
    .small-font .dot{
        height: 6px;
        width: 6px;
        margin-right: 3px;
        border: #DCDFE6 solid 1px;
    }
</style>
